import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  Mesh,
  BoxBufferGeometry,
  MeshBasicMaterial,
  TextureLoader,
  AxesHelper,
  Color,
  AmbientLight,
  DirectionalLight,
  Vector3,
  GridHelper,
  ExtrudeBufferGeometry,
  Vector2,
  ShapePath,
  Group,
  Path,
  Shape,
  ShapeBufferGeometry,
  DoubleSide,
  PlaneBufferGeometry,
  MeshPhongMaterial,
  Box3,
  MeshStandardMaterial,
  PointLight,
  PMREMGenerator,
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RepeatWrapping, RGBEEncoding } from "three/src/constants";

let camera: PerspectiveCamera, scene: Scene, renderer: WebGLRenderer;
let mesh: Mesh;
let group: Group;

init();
animate();

function init() {
  camera = new PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.set(15, 15, 15);

  scene = new Scene();
  scene.background = new Color("#b0b0b0");

  let ambientLight = new AmbientLight("#fff", 1);
  scene.add(ambientLight);
  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  const controls = new OrbitControls(camera, renderer.domElement);
  const pmremGenerator = new PMREMGenerator(renderer);

  group = new Group();
  scene.add(group);

  let material = new MeshStandardMaterial();
  material.roughness = 0.5;
  material.metalness = 0.5;

  const rgbeLoader = new RGBELoader();
  rgbeLoader.load(
    require("../static/textures/venice_sunset_1k.hdr").default,
    (data) => {
      const hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(data);
      scene.background = hdrCubeRenderTarget.texture;
      scene.environment = hdrCubeRenderTarget.texture;
    }
  );

  // instantiate a loader
  const loader = new OBJLoader();
  // load a resource
  loader.load(
    // resource URL
    require("../static/modal/cerberus/Cerberus.obj").default,
    // called when resource is loaded
    function (group) {
      group.rotateY(- Math.PI / 2);
      group.scale.set(10, 10, 10);
      scene.add(group);

      let diffuseMap = new TextureLoader().load(
        require("../static/modal/cerberus/Cerberus_A.jpg").default
      );
      //   diffuseMap.encoding = RGBEEncoding;
      material.map = diffuseMap;
      material.roughnessMap = material.metalnessMap = new TextureLoader().load(
        require("../static/modal/cerberus/Cerberus_RM.jpg").default
      );
      // material.normalMap = new TextureLoader().load(
      //   require("../static/modal/cerberus/Cerberus_N.jpg").default
      // );

      group.traverse((child) => {
        if (child.type === "Mesh") {
          (child as Mesh).material = material;
        }
      });
    },
    // called when loading is in progresses
    function (xhr) {
      console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
    },
    // called when loading has errors
    function (error) {
      console.log("An error happened");
    }
  );

  // renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}
